<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="/static/chat/chat/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="/static/chat/chat/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="/static/chat/chat/fonts/iconfont.css?v=2016070717">
    <script src="/static/chat/chat/js/jquery.min.js"></script>
    <script src="/static/chat/chat/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="/static/chat/chat/js/dist/flexible/flexible.debug.js"></script>
</head>
<body ontouchstart>
<div class='fui-page-group'>
    <div class='fui-page chatDetail-page'>
        <div class="chat-header flex">
            <i class="icon icon-toleft t-48"></i>
            <span class="shop-titlte t-30">{$receive.nick_name}</span>
            <span class="shop-online t-26"></span>
            <span><a class="into-shop" href="/index/chat/userList">返回</a></span>
        </div>
        <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
            <div class="chat-content">
                <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
                <p class="chat-time"><span class="time">{$time|date="Y-m-d"}</span></p>

               <!-- {if condition="empty($no_read_data)"}{else/}
                {volist name="no_read_data" id="vo"}
                <div class="chat-text section-left flex">
                    <span><img class="char-img" src="{$send.head_img}"></span>
                    <span class="text"><i class="icon icon-sanjiao4 t-32"></i>{$vo.content}</span>
                </div>
                {/volist}
                {/if}-->

                <!--<div class="chat-text section-right flex">
                    <span class="text"><i class="icon icon-sanjiao3 t-32"></i>你好</span>
                    <span><img class="char-img" src="{$send.head_img}"></span>
                </div>-->

            </div>
        </div>
        <div class="fix-send flex footer-bar">
            <i class="icon icon-emoji1 t-50"></i>
            <input class="send-input t-28" maxlength="200">
            <i class="icon icon-add t-50" style="color: #888;"></i>
            <span class="send-btn">发送</span>
        </div>
    </div>
</div>
<input type="hidden" id="send" value="{$send}">
<input type="hidden" id="receive" value="{$receive}">
<script>
    var send = eval('('+$("#send").val()+')'); //发送者的信息
    var receive = eval('('+$("#receive").val()+')'); //接收者的信息

   var ws = new WebSocket("ws://127.0.0.1:8282"); //实例化

    //打开
   ws.onopen = function(){
       setInterval(sendHeart,50000); //发送心跳包
       bindUid(); //绑定用户id
       chatRecord(send,receive,send.id,receive.id);
   };

    //监听返回的消息
   ws.onmessage = function(e){
       var data = eval('('+e.data+')');
       switch(data.type){
           case 'sayText':
               receiveMessage(data,receive,send);
               return;
           case 'connect':
               console.log(data);
               return;
           case 'sendSelfSaveData':
               postSaveData(data);
               return;
       }
   };

    function sendHeart(){
        var send_message = '{"data":"check heart","type":"heart"}';
        ws.send(send_message);
    }
    function bindUid(){
        var send_message = '{"type":"bindUid","send_id":"'+send.id+'","receive_id":"'+receive.id+'"}';
        ws.send(send_message);
    }
    function receiveMessage(data,receive,send){
        if(data['send_id'] == receive['id']){
            $('.chat-content').append('<div class="chat-text section-left flex"><span><img class="char-img" src="'+send.head_img+'"></span><span><i class="icon icon-sanjiao3 t-32"></i>'+data['data']+'</span></div>');
        }
    }

    //持久化(保存)数据
    function postSaveData(data){
        $.post("{:url('saveData')}",data,function(){
            console.log("消息发送成功");
        });
    }

    //初始化聊天记录(显示)
    function chatRecord(send,receive,send_id,receive_id){
        $.post("{:url('chatRecord')}",{'send_id':send_id,'receive_id':receive_id},function(data){
            // console.log(data);
           $.each(data,function(index,content){
                if(send_id == content.send_id){
                    $('.chat-content').append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+content.content+'</span><span><img class="char-img" src="'+receive.head_img+'"></span></div>');
                }else{
                    $('.chat-content').append('<div class="chat-text section-left flex"><span><img class="char-img" src="'+send.head_img+'"></span><span><i class="icon icon-sanjiao3 t-32"></i>'+content.content+'</span></div>');
                }
            })
        });
    }

    //点击发送
    $(".send-btn").click(function(){
        var text = $(".send-input").val();
        if(text.length == ""){
            alert("发送内容不能为空");
            return false;
        }
        var send_message = '{"data":"'+text+'","type":"sayText","send_id":"'+send.id+'","receive_id":"'+receive.id+'"}';
        $('.chat-content').append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+text+'</span><span><img class="char-img" src="'+receive.head_img+'"></span></div>');
        ws.send(send_message);
        $(".t-28").val("");
    });

</script>
</body>
</html>